import { reactive } from "vue";
import Comment from "./comment";

let size = Comment.blockSize;

let stoneArr = reactive({
  shu: [], //树
  xz: [] //箱子
}); //障碍物数组
// mapArr  获取地图的数组 计算障碍物
//  遇到数组成员为  1   代表一个障碍物  因为地图默认是 width:1200,height:600 一个格子大小为 50 ，后端以 一个格子中心为标准（如第一个格子：（25，25））
//  数组排序 是从左上开始  例：[0,1,1,0,0....] 第一个格子就不是障碍物  第二个格子就是障碍物.... 向下面这样排序
//  1  2  3  4  5  6
//  7  8  9  10  11  12
// 一行有1200/50=24个 所以以24来计算  通过下标计算出x,y位置
export function createStone(mapArr) {
  mapArr.map((item, index) => {
    if (item == 1) {
      let _S = document.createElement("img");
      let x = (index % 24) * size;
      let y = parseInt(index / 24) * size;
      stoneArr.shu.push([x, y]); //记录障碍物位置
      _S.src = require("@/assets/stone.png");
      _S.style.width = Comment.stoneWidth + "px";
      _S.style.height = Comment.stoneHeight + "px";
      _S.style.position = "absolute";
      _S.style.top = y + "px";
      _S.style.left = x + "px";
      _S.className = `stone ${index}`;
      document.getElementById("box").appendChild(_S);
    }
    if (item == 3) {
      //可以炸毁的障碍物
      let _S = document.createElement("img");
      let x = (index % 24) * size;
      let y = parseInt(index / 24) * size;
      stoneArr.xz.push([x, y]); //记录可以炸毁的障碍物位置
      _S.src = require("@/assets/stone1.png");
      _S.id = `xz-${index}`;
      _S.style.width = Comment.stoneWidth + "px";
      _S.style.height = Comment.stoneHeight + "px";
      _S.style.position = "absolute";
      _S.style.top = y + "px";
      _S.style.left = x + "px";
      _S.className = `stone ${index}`;
      document.getElementById("box").appendChild(_S);
    }
  });
}
export default stoneArr;
